import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {Link} from 'dva/router';
import {Form, Card, Row, Col, Input, Select, Table, Button,Radio,Modal} from 'antd';
import DistributorManageTable from '../../components/Distributor/DistributorManage/index'
import DistributorEdit from '../../components/Distributor/DistributorManage/edit'
import ShopDetail from '../../components/Distributor/DistributorManage/shopDetail'
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './DistributorManage.less';
import {routerRedux} from 'dva/router';
const FormItem = Form.Item;
const {Option} = Select;
import {powerControl} from '../../utils/powerControl';
const AuthButton = powerControl(Button);

/*
* 分销商管理页面
* */
@connect(state => ({
    distributorManage: state.distributorManage
}))
@Form.create()
export default class DistributorManage extends PureComponent{
    state={
        modalVisible:false,
        detailVisible:false,
        record:{},
        formValues:{},
    }

    componentDidMount(){
        const {dispatch} = this.props;
        dispatch({
            type:'distributorManage/queryAll',
            payload:{},

        });
    }

    handleSearch=(e)=>{
        e.preventDefault();
        this.props.form.validateFields((err,values)=>{
            if(!err){
                this.props.dispatch({
                    type:'distributorManage/queryAll',
                    payload:values,
                });
            }
        });
    }

    handleFormReset=()=>{
        const {form, dispatch} = this.props;
        form.resetFields();
        dispatch({
            type:'distributorManage/queryAll',
            payload:{},
        });
    }

    renderSimpleForm() {
        const {getFieldDecorator} = this.props.form;
        const {distributorManage} = this.props;
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={{md: 8, lg: 24, xl: 48}}>
                    <Col md={8} sm={24}>
                        <FormItem label="电话号码">
                            {getFieldDecorator('distributorPhone')(<Input size="default" placeholder="电话号码"/>)
                            }
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                        <FormItem label="商店名称">
                            {getFieldDecorator('distributorName')(<Input size="default" placeholder="商店名称"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
            <span className={styles.sumbitButtons}>
              <AuthButton auth="distributorManageCh.search"  type="primary" htmlType="submit" loading={distributorManage.submitting}>查询</AuthButton>
              <AuthButton auth="distributorManageCh.reset" style={{marginLeft: 8}} onClick={this.handleFormReset}>重置</AuthButton>
            </span>
                    </Col>
                </Row>
            </Form>
        );
    }

    renderForm() {
        return this.renderSimpleForm();
    }
    handleTableChange=(pagination)=>{
        const {dispatch} = this.props;
        const {formValues} = this.state.formValues
        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            ...formValues
        };
        dispatch({
            type: 'distributorManage/queryAll',
            payload:params,
        });
    }
    handleEdit=(record)=>{
      this.handleModalVisible(true);
        this.setState({
            record:record,
        })
    }
    handleDetail=(record)=>{
      this.setState({
        record:record,
      })
      this.handleDetailVisible(true);
    }
    handleModalVisible = (flag) => {
        this.setState({
            modalVisible:!!flag,
        });
    };
    handleDetailVisible =(flag)=>{
      this.setState({
          detailVisible:!!flag,
      });
    }

    handleModalSuccess = (pagination) => {
        const {dispatch} = this.props;
        const {formValues} = this.state;
        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            ...formValues,
        };
        dispatch({
            type: 'distributorManage/queryAll',
            payload: params,
        });
    }

    render() {
        const {distributorManage:{data,submitting},form}=this.props;
        const {getFieldDecorator}=form;
        const {modalVisible,record,detailVisible}=this.state;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };
        return (
            <PageHeaderLayout title="分销商管理">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div className={styles.tableListForm}>
                            {this.renderForm()}
                        </div>
                        <DistributorManageTable
                            handleEdit={this.handleEdit}
                            handleDetail={this.handleDetail}
                            handleModalVisible={this.handleModalVisible}
                            handleDetailModalVisible={this.handleDetailVisible}
                            data={data}
                            handleTableChange={this.handleTableChange}
                        />
                        <Modal
                            key={new Date()}
                            title="编辑分销商"
                            visible={modalVisible}
                            onCancel={()=>this.handleModalVisible(false)}
                            onOk={this.handlesOk}
                            footer={null}>
                            <DistributorEdit ref="edit"
                                            pagination={data.pagination}
                                            record={record}
                                            handleModalVisible={this.handleModalVisible}
                                            handleModalSuccess={this.handleModalSuccess}
                            />
                        </Modal>
                        <Modal
                          key={new Date()+1}
                          title="编辑店铺"
                          visible={detailVisible}
                          onCancel={()=>this.handleDetailVisible(false)}
                          onOk={this.handlesOk}
                          footer={null}>
                          <ShopDetail ref="ShopDetail"
                                           pagination={data.pagination}
                                           record={record}
                                           handleModalVisible={this.handleDetailVisible}
                                           handleModalSuccess={this.handleModalSuccess}
                          />

                        </Modal>
                        <div>

                        </div>
                    </div>
                </Card>
            </PageHeaderLayout>
        )
    }



}